<template>
  <div v-loading="is_loading" class="pa-6">
    <v-card outlined class="ma-5 control-block">
      <v-card-title>我关注的学者</v-card-title>
    </v-card>

    <scholar-follow :scholars="follows"> </scholar-follow>

    <div class="empty-placeholder" v-if="follows.length == 0">暂无关注</div>
    <div v-for="(paper, index) in activities" :key="index">
      <div class="activity" @click="toAuthor(paper.follow[0].id)">
        <v-img
          :src="paper.follow[0].avatar"
          width="60px"
          style="margin-right: 20px"
        ></v-img>
        <div style="display: grid">
          <span style="color: black; font-size: 14pt">{{
            paper.follow[0].name
          }}</span>
          <span> {{ paper.year }} </span>
        </div>
      </div>
      <paper-card :paper="paper"> </paper-card>
    </div>
  </div>
</template>

<script>
import { mdiDelete } from "@mdi/js";
import ScholarFollow from "@/components/scholar/ScholarFollow.vue";
import PaperCard from "../../../components/PaperCard.vue";

export default {
  components: {
    ScholarFollow,
    PaperCard,
  },
  data() {
    return {
      follows: [],
      subscription: [],
      activities: [],
      subscription_keyword: "",
      icons: {
        mdiDelete,
      },
      is_loading: false,
    };
  },
  mounted() {
    this.is_loading = true;
    this.$api.personal
      .getFollows()
      .then((data) => {
        this.follows = data;
      })
      .catch((error) =>
        this.$notify({
          message: error.api_detail || error,
          title: "API error",
        })
      )
      .finally(() => (this.is_loading = false));
    this.$api.personal
      .getFollowActivities()
      .then((data) => (this.activities = data))
      .catch((error) =>
        this.$notify({
          message: error.api_detail || error,
          title: "API error",
        })
      );
  },
  methods: {
    toAuthor(scholar) {
      console.log(scholar);
      this.$router.push("/profile/" + scholar);
    },
    unfollow(scholar) {
      this.is_loading = true;
      this.$api.personal
        .unfollow(scholar.id)
        .then(() => this.$router.go())
        .catch((error) =>
          this.$notify({
            message: error.api_detail || error,
            title: "API error",
          })
        )
        .finally(() => (this.is_loading = false));
    },
  },
};
</script>

<style lang="sass" scoped>
.paperCard
  width: 100%

.new-subscription-form
  width: 50%
  display: inline-flex

.empty-placeholder
  text-align: center
</style>
<style scoped>
.activity {
  margin: 15px;
  display: inline-flex;
  cursor: pointer;
}
</style>

